body, p, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  max-height: 13333.32rem;
}

[v-cloak] {
  display: none;
}

$inner-bg-color: rgba(48,36,145,0.4);
$award-bg-color: rgba(39,22,104,1);
#app {
  width: 100%;
  background-color: rgba(14,0,35,1);
  color: white;
  overflow: hidden;
  // padding-bottom: 1.333333rem;
  .head-img {
    width: 100%;
  }

  .btn {
    padding: .346667rem .426667rem;
    color: white;
    letter-spacing: .026667rem;
    border-radius: .266667rem;
    display: inline-block;
  }

  .title {
    margin:  0 auto;
    display: block;
  }
  .title:not(:first-child) {
    margin-top: .693333rem;
  }

  .award-wrapper {
    width: 89.33%;
    // height: 115.12rem;
    margin: 0 auto;
    background-color: $inner-bg-color;
    border-radius: .4rem;
    border: .026667rem solid rgba(89,70,255,1);
    padding: .666667rem 0 .8rem;
    box-sizing: border-box;

    >.award-nav {
      overflow: hidden;
      padding: 0 .853333rem;
      box-sizing: border-box;
      >.charm-btn {
        background-color: rgba(83,63,255,1);
        float: left;
      }
      >.rich-btn {
        background-color: rgba(225,45,147,1);
        float: right;
      }
    }

    >.award-content {
      width: 100%;
      padding-top: .56rem;
      box-sizing: border-box;

      >.rich-award-desc {
        text-align: center;
      }

      >.color-1 {
        color: #FFF785;
        font-weight: 600;
        text-shadow: 0 #FFF785;
      }
      img {
        width: 60%;
      }
      >.award-first {
        width: 48.36%;
      }

      >.award-box {
        width: 100%;
        overflow: hidden;
        text-align: center;
        .award {
          width: 2.266667rem;
          display: inline-block;
          .gift-img {
            width: 100%;
            height: 1.866667rem;
            background-color: $award-bg-color;
            border-radius: .4rem;
            margin-bottom: .213333rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .middle {
          margin: 0 .4rem;
        }
      }
      .one-line {
        margin-top: .346667rem;
      }
      .two-line {
        margin-top:  .266667rem;
        .award:nth-child(1) {
          margin-right: .2rem;
        }
        .award:nth-child(2) {
          margin-left: .2rem;
        }
      }
    }
  }

  .ranking-title {
    width: 51.73%;
    margin:  .8rem auto .533333rem;
    box-sizing: border-box;
    display: block;
  }

  .ranking-nav {
    text-align: center;
    margin-bottom: .666667rem;
    box-sizing: border-box;
    >.charm-btn {
      background-color: rgba(83,63,255,1);
      margin-right: .32rem;
    }
    >.rich-btn {
      background-color: rgba(225,45,147,1);
      margin-left: .32rem;
    }
  }

  .game-nav {
    text-align: center;
    margin-bottom: .506667rem;
    .btn {
      display: inline-block;
    }
    .mini {
      padding: .213333rem .346667rem;
    }

    >.charm-btn {
      background-color: rgba(83,63,255,1);
    }
    >.rich-btn {
      background-color: rgba(225,45,147,1);
    }
  }

  .game-desc {
    width: 89.97%;
    display: block;
    margin:  0 auto .64rem;
  }

  .search-box {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    >.search-wrapper {
      width: 57.07%;
      background:rgba(48,36,145,0.4);
      border-radius: .666667rem;
      border: .026667rem solid rgba(89,70,255,1);
      position: relative;
      overflow: hidden;
      label {
        z-index: 2;
        position: absolute;
        // top: .4rem;
        height: .4rem;
        left: 22.9%;
        color:rgba(72,53,239,1) !important;
      }

      input {
        padding-left: 22.9%;
        font-size: .666667rem;
        width: 100%;
        // text-indent: 90px;
        // text-align:center;
        height: 1.2rem;
        border: none;
        outline: none;
        background:rgba(48,36,145,0.4);
      }

      i {
        width: .506667rem;
        height: .506667rem;
        position: absolute;
        left: 9.35%;
        top: 50%;
        margin-top: -0.253333rem;
        background-image: url(./images/search.png);
        background-size:100% 100%;
      }
    }
    >.search-btn {
      width: 29.87%;
      height: 1.2rem;
      background:rgba(47,36,145,1);
      border-radius: .666667rem;
      color:rgba(181,172,255,1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: .213333rem;
    }
  }

  .audio-box {
    margin-top: .666667rem;
    text-align: center;
    >.audio-item {
      width: 4.586667rem;
      display: inline-block;
      border-radius: .213333rem;
      overflow: hidden;
      background:rgba(40,22,110,1);
      margin-bottom: .186667rem;
      position: relative;

      >.audio-img {
        height: 4.853333rem;
        overflow: hidden;
        background-color: gray;
      }

      >.playMusic {
        width: 500px;
        height: 100px;
      }
      
      .user-info-box {
        padding: .266667rem .213333rem .32rem;
        box-sizing: border-box;
        >.user-info {
          display: flex;
          text-align: center;
          line-height: .426667rem;
          
          >.nickname {
            width: 43.6%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
          }
  
          .voice {
            width: 38.95%;
            height: .426667rem;
            display: inline-block;
            margin-left: .373333rem;

            border: .026667rem solid rgba(255,36,154,1);
            border-radius: .266667rem;
            visibility: hidden;
            .playimg{
              display:inline-block;
              height:.16rem;
            }
          }
          .Audio{
            position: relative; 
            width: 38.95%;
            height: .426667rem;
            margin: 0 auto;
            border: .026667rem solid rgba(255,36,154,1);
            border-radius: .266667rem;
            // display:flex;
          }
          .pgs{
           width: 100%;
            height: .426667rem;
            background-color:rgba(40,22,110,1)9; 
            text-align: center; 
            position: absolute ; 
            left: 0;
            overflow: hidden; 
            border-radius: .266667rem;
            display: inline-block;
            max-height: 13333.32rem;
            }
          .pgs-play{
            position: absolute; 
            top:0; left: 0; 
            width: .4rem; 
            height: 100%; 
            background-color: rgba(40,22,110,1); 
            z-index: 1;
            border-radius:50%
          }
          .pgs img{
            width: .16rem; 
            position: relative; 
            max-height: 13333.32rem;
            z-index: 2;}
          .audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}
          .controls{
            width:37.31%;
            height: .026667rem;
            position: relative; 
            top: 50%;
            display: inline-block;
            background-color:rgba(255,36,154,1);
            margin-left: -0.133333rem;
          }
          .play-pause{
            border: 0; 
            outline: 0; 
            padding: 0; 
            width: 40px; 
            height: 40px; 
            background: none; 
            display: inline-block; 
            vertical-align: middle;}
          .icon-play{
            width: 40px; 
            height: 40px; 
            background: url(images/play.png) no-repeat; 
            display: block; 
            color: #478f59;}
          .icon-pause{width: 40px; 
            height: 40px; 
            background: url(images/pruse.png) no-repeat; 
            display: block; 
            color: #478f59;}
          .controls span{
            color: #ff249a;
            width: 22.39%;
            top: 50%;
            margin-top: -0.106667rem !important;
            left: 1.066667rem;
          }
          .audio-time{
            display: inline-block; 
            vertical-align: middle;
            position: absolute;
            margin-left: .026667rem;
            top: 50%;
            margin-top: -0.12rem;
            padding-left: .026667rem;
            p{
              color: #ff249a;
            }
          }
        }
  
        .ticket {
          margin-top: .186667rem;
          text-align: left;
        }
  
        .vote-btn {
          width: 90.7%;
          height: .933333rem;
          background:linear-gradient(90deg,rgba(255,101,108,1) 0%,rgba(225,45,147,1) 100%);
          border-radius: .533333rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 247, 133, 1);
          margin: .266667rem auto 0;
        }
      }

      .tag {
        width: 37.21%;
        height: .586667rem;
        background:linear-gradient(90deg,rgba(255,73,171,1) 0%,rgba(85,88,255,1) 100%);
        border-radius: .213333rem 0 .213333rem 0;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .gap {
      margin-left: .186667rem;
    }
    .page-box{
      >.page {
        width: 29.87%;
        height: 1.2rem;
        background:rgba(47,36,145,1);
        border-radius: .266667rem;
        display: inline-block;
        line-height: 1.2rem;
        margin-top: .666667rem;
      }
    }
    
  }

  .activity-desc {
    color:rgba(83,68,216,1);
    text-align: center;
  }

  .tt {
    margin-top: .8rem;
  }

  .ranking-box {
    padding: 0 .586667rem;
    box-sizing: border-box;
  }
  table {
    width: 100%;
    tbody {
      display: block;
      height: 10.666667rem;
      overflow: auto;
      tr {
        display: table;
        table-layout: fixed;
        height: 2rem !important;
      }
      .ranking-img {
        border-radius: 50%;
        width: 80%;
        height: 0;
        padding-bottom: 80%;
        overflow: hidden;
       
      }

      .border-1 {
        border: .08rem solid #FFD600;
      }

      .border-2 {
        border: .08rem solid #F9F9F9;
      }

      .border-3 {
        border: .08rem solid #EB904B;
      }

      .ranking-1 {
        color: #FFD600;
      }

      .ranking-2 {
        color: #F9F9F9;
      }

      .ranking-3 {
        color: #EB904B;
      }

      .ranking-item-bg {
        background:rgba(27,14,79,1);
      }
    }
  }

  .cc-1 {
    background:rgba(47,36,145,0.7) !important;
    color:rgba(255, 255, 255, 0.5) !important;  
  }

  .cc-2 {
    background:rgba(225,45,147,1) !important;
    color:rgba(255, 255, 255, 0.5) !important;
  }

  .dialog {
    width: 89.33%;
    height: 7.6rem;
    background:rgba(48,36,145,0.4);
    border-radius: .4rem;
    border: .026667rem solid rgba(89,70,255,1);
    margin:  .773333rem auto 0;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -44.665%;
    z-index: 101;

    >.dialog-box {
      position: relative;
      text-align: center;
      margin-top: .96rem;
      box-sizing: border-box;
      .dialog-plus {
        width: 1.333333rem;
        height: 1.333333rem;
        border-radius: 50%;
        background:rgba(255,36,154,1);
        position: absolute;
        top: 50%;
        margin-top: -0.666667rem;
        left: .96rem;
        color: black;
      }
      .input {
        text-align: center;
        font-size: .666667rem;
        width: 3.84rem;
        height: 1.6rem;
        border-radius: .8rem;
        display: inline-block;
      }
      .dialog-minus {
        width: 1.333333rem;
        height: 1.333333rem;
        border-radius: 50%;
        background:rgba(255,36,154,1);
        position: absolute;
        top: 50%;
        margin-top: -0.666667rem;
        right: 0.96rem; 
        color: black;
      }
    }

    >.dialog-desc {
      text-align: center;
      color:rgba(255,247,133,1);
      margin-top: .8rem;
    }

    >.dialog-btn {
      width: 68.96%;
      height: 1.92rem;
      display: block;
      margin: .666667rem auto 0;
    }
  }

  .overlay {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    // display: none;
    z-index: 100;
  }

  .bottom-img {
    width: 100%;
    margin-top: .773333rem;
  }
  #phone-dialog {
    position: fixed;
    bottom: 0;
    height: 5.173333rem;
    background-color: white;
    width: 74.93%;
    border-radius: .16rem;
    margin:  .773333rem auto ;
    top:30%;
    left:12%;
    z-index: 101;
  
    .phone-desc {
      font-weight: 500;
      color: rgba(50, 50, 50 ,1);
      text-align: center;
      margin-top: .88rem;
      text-shadow: 0 0 #000;
      font-size:.426667rem;
      font-family:PingFangSC-Medium,PingFang SC;

    }
  
    .phone-input {
      width: 6.426667rem;
      height: 1.066667rem;
      margin:  .72rem auto .853333rem;
      display: block;
      border:.026667rem solid rgba(218,218,218,1);
      border-radius: .053333rem;
      font-size: .666667rem;
    }
  
    .liao-btn {
      width: 6.426667rem;
      height: 1.013333rem;
      margin:  0 auto;
      box-shadow: 0 0 .106667rem 0 rgba(0, 0, 0, 0.36);
      border-radius: .506667rem;
  
      font-weight: 600;
      text-shadow: 0 0 .106667rem rgba(0, 0, 0, 0.36);
      display: flex;
      align-items: center;
      justify-content: center;
      background:rgba(187,187,187,1);
      color: white;
    }
    .liao-btn-no {
      background-color: rgba(50, 50, 50, 1) !important;
      color:rgba(52, 249, 165, 1) !important;
    }
  }
  #over-dialog {
    position: fixed;
    top: 17.08%;
    left: 50%;
    margin-left: -4.133333rem;
  
    width: 8.266667rem;
    height: 6.586667rem;
    background-color: rgba(255, 255, 255, 1);
    border-radius: .266667rem;
    z-index: 101;
  
    >.close {
      position: absolute;
      top: 2.4%;
      right: 2.4%;
  
      width: .426667rem;
      height: .426667rem;
  
      background-image: url(../images/close2x.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
    >p {
      text-align: center;
      font-weight: 500;
      color: black;
    }
    >p:nth-child(2) {
      margin-top: 1.733333rem;
    }
    .btn {
      width: 6.64rem;
      // height: 1.333333rem;
      background:rgba(50,50,50,1);
      box-shadow: 0 0 .106667rem 0 rgba(0,0,0,0.36);
      border-radius: .666667rem;
      margin: 1.226667rem auto 1.173333rem;
    
      color:rgba(52,249,165,1);
      font-weight: 600;
      text-shadow: 0 0 .106667rem rgba(0, 0, 0, 0.36);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

[data-dpr="1"] {
  #app {
    font-size: 12px;
    line-height: 14px;
  }
  .btn {
    font-size: 22px;
    line-height: 25px;
  }
  .mini {
    font-size: 18px;
    line-height: 25px;
  }
  
  label {
    font-size: 15px;
    line-height: 45px;
  }

  .search-btn {
    font-size: 16px;
  }

  .nickname {
    font-size: 15px;
  }

  .ticket {
    font-size: 14px;
  }

  .vote-btn {
    font-size: 18px;
  }

  .page {
    font-size: 16px;
    line-height: 45px;
  }

  .activity-desc {
    font-size: 12px;
    line-height: 18px;
  }

  .ranking {
    font-size: 24px;
  }

  .dialog-plus, .dialog-minus {
    font-size: 40px;
    line-height: 40px;
  }

  .dialog-desc {
    font-size: 24px;
  }

  .rich-award-desc {
    font-size: 15px;
    line-height: 26px;
  }
  #over-dialog p {
    font-size: 16px;
    line-height: 25px;
  }
  #over-dialog .btn {
    font-size: 16px;
    line-height: 22px;
  }
  #voice-bt p {
    font-size: 8px;
    line-height: 18px;
  }
  .controls span{
    font-size: 4px;
    line-height: 9px;
  }
  .controls span{
    font-size: 4px;
    line-height: 9px;
  }
  .audio-time p{
    font-size: 10px;
    line-height: 10px;
  }
}

[data-dpr="2"] {
  #app {
    font-size: 24px;
    line-height: 28px;
  }
  .btn {
    font-size: 44px;
    line-height: 50px;
  }
  .mini {
    font-size: 36px;
    line-height: 50px;
  }

  label {
    font-size: 30px !important;
    line-height: 90px;
  }

  .search-btn {
    font-size: 32px;
  }

  .nickname {
    font-size: 30px;
  }

  .ticket {
    font-size: 28px;
  }

  .vote-btn {
    font-size: 36px;
  }

  .page {
    font-size: 32px;
    line-height: 90px;
  }

  .activity-desc {
    font-size: 24px;
    line-height: 36px;
  }

  .ranking {
    font-size: 48px;
  }

  .dialog-plus, .dialog-minus {
    font-size: 80px;
    line-height: 80px;
  }

  .dialog-desc {
    font-size: 48px;
  }

  .rich-award-desc {
    font-size: 30px;
    line-height: 52px;
  }
  #over-dialog p {
    font-size: 32px;
    line-height: 50px;
  }
  #over-dialog.btn {
    font-size: 32px;
    line-height: 44px;
  }
  #voice-bt p {
    font-size: 8px;
    line-height: 18px;
  }
  .controls span{
    font-size: 8px;
    line-height: 18px;
  }
  .audio-time p{
    font-size: 20px;
    line-height: 20px;
  }
}

[data-dpr="3"] {
  #app {
    font-size: 36px;
    line-height: 42px;
  }
  .btn {
    font-size: 66px;
    line-height: 75px;
  }
  .mini {
    font-size: 54px;
    line-height: 75px;
  }
  
  label {
    font-size: 45px;
    line-height: 135px;
  }

  .search-btn {
    font-size: 48px;
  }

  .nickname {
    font-size: 45px;
  }

  .ticket {
    font-size: 42px;
  }

  .vote-btn {
    font-size: 54px;
  }

  .page {
    font-size: 48px;
    line-height: 135px;
  }

  .activity-desc {
    font-size: 36px;
    line-height: 54px;
  }

  .ranking {
    font-size: 72px;
  }

  .dialog-plus,.dialog-minus {
    font-size: 120px;
    line-height: 120px;
  }

  .dialog-desc {
    font-size: 72px;
  }

  .rich-award-desc {
    font-size: 45px;
    line-height: 78px;
  }
  #over-dialog p {
    font-size: 48px;
    line-height: 75px;
  }
  #over-dialog.btn {
    font-size: 48px;
    line-height: 66px;
  }
  #voice-bt p {
    font-size: 8px;
    line-height: 18px;
  }
  .controls span{
    font-size: 12px;
    line-height: 27px;
  }
  .audio-time p{
    font-size: 30px;
    line-height: 30px;
  }
}